<!-- 表格组件 -->
<template>
  <section  :style="innerStyleObj" :class="tableClassObj">
   
    <span class="table-col-select-container" v-if="isShowDynamicCol">
      <div class="table-title">{{title}}</div>
      <div class="top-button-list">
        <slot
          name="topButtonList"
        >
        </slot>
        <el-dropdown trigger="click">
          <!-- table-col-select-btn -->
          <span>
            <el-tooltip slot="reference" class="item" effect="dark" content="列设置" placement="top">
              <i class="el-icon-setting"></i>
            </el-tooltip>
            <!-- 应要求 更换新的图标 -->
            <!-- <i class="el-icon-s-operation"></i> -->
            <el-popover
              placement="left-start"
              trigger="hover"
              title="自定义列"
              content="此按钮可以自主勾选想要查看的表格列"
            >
              <!-- 应ui要求提供的图标 -->
              <!-- <el-button size="small" type="primary" slot="reference">
                <i class="el-icon-s-unfold"></i>
                自定义列
              </el-button> -->
              <!-- 按钮区 -->
            </el-popover>
          </span>
  
          <el-dropdown-menu slot="dropdown">
            <!-- 先不考虑制作全选控制 后面再添加 -->
            <el-checkbox-group
              v-model="dynamicTableHandleObj.selectedList"
              class="table-col-select-list-container"
              @change="dynamicTableHandleObj.globalSaveSelectedList()"
            >
              <el-checkbox
                v-for="(
                  item, indx
                ) in dynamicTableHandleObj.torenderCanSelectList"
                :label="item.key"
                :key="indx"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </span>


    <section class="ces-table">
      <el-table
        v-if="tableType !== 'custom'"
        ref="table"
        v-loading="loading"
        :size="size"
        style="width: 100%"
        :data="tableData"
        :fit="isFit"
        :border="isBorder"
        :stripe="isStripe"
        :cell-style="{ borderColor:'#f0f0f0',padding: 5 }"
        :header-cell-style="{ borderColor:'#f0f0f0', backgroundColor: '#FAFAFA' }"
        :show-header="showHeader"
        :tree-props="treeProps"
        @select-all="selectAll"
        @selection-change="selectionChange"
        :height="computedHeight"
      >
        <!-- 是否有前面的多选效果 -->
        <el-table-column
          v-if="isSelection"
          type="selection"
          :width="selectionWidth"
        />

        <!-- 是否显示前面的序号 -->
        <el-table-column
          v-if="isIndex"
          type="index"
          :label="indexLabel"
          width="50"
        />

        <!-- 表格的每一项：表格列数据 -->
        <template v-for="(item, indx) in tableColumns" >
          <!--
            针对表格组件字符串初始化的问题：目前有两种合适的处理方案：
            1：利用该组件的formatter配置来手写格式化的方法。
            2：利用该组件自带的scope插槽写法来手动在template模板内实现文本格式化。

            可以参考的写法
            https://blog.csdn.net/William0326/article/details/102486374

            具体填写的参考值：
            :formatter="!!item.formatter ? item.formatter : null"
            :formatter="item.formatter() || (() => {})"
          -->
           <!-- 为0或者null 空值时格式化'-' -->
          <el-table-column
            v-if="!item.hidden && !ifRung"
            :prop="item.prop"
            :label="item.label"
            :key="Math.random() + indx"
            :sortable="item.isSortable || false"
            :fixed="item.fixed || null"
            :min-width="item.minWidth || ''"
            :width="columnWidthFun(item)"
            :show-overflow-tooltip="typeof item.overflow !== 'undefined' ? item.overflow : overflow"
            :align="item.align"
            :formatter="!!item.formatter ? item.formatter() : () => {}"
             header-align="center"
          >
            <template #default="scope">
              <slot
                :name="item.slotname"
                :row="scope.row"
                :index="scope.$index"
              >
                {{ scope.row[item.prop] }}
              </slot>
            </template>
          </el-table-column>

          <!-- 为0时显示0' -->
        <el-table-column
          v-if="!item.hidden && ifRung"
          :prop="item.prop"
          :label="item.label"
          :key="Math.random() + indx"
          :sortable="item.isSortable || false"
          :fixed="item.fixed || null"
          :min-width="item.minWidth || ''"
          :width="columnWidthFun(item)"
          :show-overflow-tooltip="overflow"
          :align="item.align"
          :formatter="!!item.formatter ? item.formatter() : () => {}"
        >
          <template #default="scope">
            <slot :name="item.slotname" :row="scope.row" :index="scope.$index">
              {{ scope.row[item.prop] }}
            </slot>
          </template>
        </el-table-column>
        </template>
      </el-table>

      <!-- 当需要自己写column的时候可用 -->
      <el-table
        v-else
        ref="table"
        v-loading="loading"
        :size="size"
        style="width: 100%"
        :data="tableData"
        :fit="isFit"
        :border="isBorder"
        :stripe="isStripe"
        :cell-style="{ padding: 5 }"
        @select-all="selectAll"
        @selection-change="selectionChange"
      >
        <!-- 是否有前面的多选效果 -->
        <el-table-column
          v-if="isSelection"
          type="selection"
          align="center"
          width="54"
        />
        <template>
          <slot>自定义写</slot>
        </template>
      </el-table>
    </section>

  </section>  
</template>

<script>
import dynamicTableCol from "./mixins/dynamic-table-col/v3/dynamic-table-col.js";
import StickyTableHeader from "./mixins/sticky-table-header/v3/index.js";
import dblclickCopyMixins from "./mixins/dblclickCopy/index.js";
export default {
  mixins: [dynamicTableCol, StickyTableHeader, dblclickCopyMixins],
  name: 'VTable',
  props: {
    // 1. 表格的尺寸大小 mini,medium,small
    size: { type: String },
    // 2. 是否需要带边框
    isBorder: { type: Boolean, default: false },
    // 3. 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: '序号' },
    // 4. 是否带斑马纹
    isStripe: { type: Boolean, default: false },
    // 5. 是否显示前面的多选效果
    isSelection: { type: Boolean, default: true },
    selectionWidth: { type: Number, default: 50 },
    // 6. 溢出隐藏
    overflow: { type: Boolean, default: true },
    // 7. 加载动画
    loading: { type: Boolean, default: false },
    // 8. 表格数据
    tableData: { type: Array, default: () => [] },
    // 9. 表格列数据
    tableColumns: { type: Array, default: () => [] },
    // 是否显示表头
    showHeader: { type: Boolean, default: true },

    // 11. 表格的每一列的宽度 是否自撑开？默认设置为是，自动自适应的宽度。
    isFit: { type: Boolean, default: true },
    tableType: { type: String, default: '' },
    treeProps: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 数字为0时是否显示横杠
    ifRung: false,
     /** 是否需要顶部边距？ 默认为是 一般情况下总是使用默认值。 样式控制变量。 */
    isHasTopMargin: { type: Boolean, default: true },

    /** 表格距离顶部的距离 内联样式 某些业务下需要实现外部手动配置其间距
     * 其间距默认配置为0px
     */
    marginTopStyle: { type: Number, default: 0 },

    /** 是否提供动态表列勾选功能？ 默认为是。 几乎全部的表格都提供此功能
     * 如果需要手动关闭 需要自己主动配置为false
     */
    isDynamicCol: { type: Boolean, default: true },
    // 流体高度
    maxHeight:{type:[Number, String],default:'200px'},
    // 表格标题
    title:{type:String,default:''},
    needComputedHeight:{type:Boolean, default:true},
    height:{type:[Number, String],default:'auto'},
  },
  data(){
    return{
      selectedList:[],
      selfSelectColumns:[],
    }
  },
  computed: {
    /** 一个更强的 样式控制判断语句 动态表格列的配置直接影响上边距的配置 */
    isHasTopMarginComputed() {
      return this.isDynamicCol && this.isHasTopMargin;
    },

    /** 表格样式动态对象 */
    tableClassObj() {
      return {
        // 默认总是要配置总体性的控制样式
        "ces-table-page": true,
        // 根据特殊的配置值来控制是否提供顶部边距控制
        "table-top-margin": this.isHasTopMarginComputed,
      };
    },

    /** 内联样式对象 内部的配置值来自于外部props传参 */
    innerStyleObj() {
      const margin = this.isHasTopMarginComputed ? this.marginTopStyle : 0;
      return {
        marginTop: `${margin}px`,
      };
    },

    /** 动态表格高度的配置 */
    computedHeight(){
      if(this.needComputedHeight&&document.getElementsByClassName('table-main')&&document.getElementsByClassName('table-main')[0]){
        // console.log(document.getElementsByClassName('table-main')[0].clientHeight)
        let res = document.getElementsByClassName('table-main')[0].clientHeight - 46 //减去顶部按钮列表的高度
        // this.maxHeight = res
        return res
      }else{
        return this.height
      }
    }
  },
  methods: {

    // 全选全部数据
    selectAll(val) {
      // console.log("in selectAll 表格子组件 全选表格 所选数据为：", val);
      this.$emit('selectAll', val)
    },

    clearSelection() {
      this.$refs.table.clearSelection();
    },

    /**
     * 选择项变化的行为监听函数
     * @param {Array} choicedItemList 被选择的表单项组成的数组。该形参是自带的默认自带的形参。
     */
    selectionChange(choicedItemList, isSet) {
      if (isSet) this.$refs.table.toggleRowSelection(choicedItemList[0], true)
      // 监听完毕后，实时将所选的内容反馈给父组件。
      this.$emit('update:selectionChange', choicedItemList)
    },

    clearSelect() {
      this.$refs.table.clearSelection()
      this.$emit('update:selectionChange', [])
    },

    /** 表格操作列的样式设置函数
     * @description 用于解决表格右侧按钮的自带间距间隔的问题
     */
    tableOperationStyleFun({ row, column, rowIndex, columnIndex }) {
      // 几乎全部的组件在配置项都会设置 operation ，故此处写死并作出比较。
      if (column["property"] === "operation") {
        return "operation-col-preset-style";
      }
      return "";
    },

    /**
     * 表格最后一列宽度的计算函数
     */
    columnWidthFun(column) {
      // 几乎全部的组件在配置项都会设置 operation ，故此处写死并作出比较。
      // if (column.prop === "operation") {
      //   return "140";
      // }
      return column.width;
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th{
  padding: 20px 0;
  text-align: left !important;
}
::v-deep .el-table td{
  padding: 20px 0;
}
.table-col-select-container{
  // float: right;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .table-title{
    font-size: 16px;
  }
}
.table-col-select-list-container {
  // 让每一个单选按钮单行排版 并具有一定的边距
  ::v-deep .el-checkbox {
    display: block;
    margin: 5px 10px;
  }
}
.top-button-list{
  display: flex;
  align-items: baseline;
}


// 2023.9.9 按运管服的样式进行了修改 ----------------开始-------------------------
.btn_content{
  margin-bottom: 0px;
}
::v-deep .el-dropdown{
  font-size: 20px;
  top: 2px;
  cursor: pointer;
}
// 2023.9.9 按运管服的样式进行了修改 ----------------结束-------------------------

::v-deep .el-table__header-wrapper{
  position: static !important;
}
</style>
